<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

    
    
    
        <h:body>
        <ui:composition template="./layout/page.xhtml">
            <ui:define name="top">               
            </ui:define>

            <ui:define name="content">
                <h2>Hello from Facelets</h2>
                <hr />
                
                <h:form>
                <p:growl id="msgs" showDetail="true" />

                <h:panelGrid columns="2" cellpadding="5">
                    <p:outputLabel value="Simple:" for="acSimple" />
                    <p:autoComplete id="acSimple" value="#{autoCompleteView.txt1}" completeMethod="#{autoCompleteView.completeText}" />

                    <p:outputLabel value="Min Length (3):" for="acMinLength" />
                    <p:autoComplete id="acMinLength" minQueryLength="3" value="#{autoCompleteView.txt2}" completeMethod="#{autoCompleteView.completeText}" effect="fade" />

                    <p:outputLabel value="Delay(1000):" for="acDelay" />
                    <p:autoComplete id="acDelay" queryDelay="1000" value="#{autoCompleteView.txt3}" completeMethod="#{autoCompleteView.completeText}" effect="blind" />

                    <p:outputLabel value="Max Results(5):" for="acMaxResults" />
                    <p:autoComplete id="acMaxResults" maxResults="5" value="#{autoCompleteView.txt4}" completeMethod="#{autoCompleteView.completeText}" />

                    <p:outputLabel value="Force Selection:" for="acForce" />
                    <p:autoComplete id="acForce" forceSelection="true" value="#{autoCompleteView.txt5}" completeMethod="#{autoCompleteView.completeText}" />

                    <p:outputLabel value="DropDown:" for="dd" />
                    <p:autoComplete id="dd" dropdown="true" value="#{autoCompleteView.txt6}" completeMethod="#{autoCompleteView.completeText}" />

                    <p:outputLabel value="Cache:" for="cache" />
                    <p:autoComplete id="cache" cache="true" cacheTimeout="30000" value="#{autoCompleteView.txt7}" completeMethod="#{autoCompleteView.completeText}" />

                    <p:outputLabel value="Select Event:" for="event" />
                    <p:autoComplete id="event" value="#{autoCompleteView.txt8}" completeMethod="#{autoCompleteView.completeText}">
                        <p:ajax event="itemSelect" listener="#{autoCompleteView.onItemSelect}" update="msgs" />
                    </p:autoComplete>
                </h:panelGrid>     
                </h:form>
                </ui:define>
            
            <ui:define name="bottom">
            </ui:define>

        </ui:composition>
    </h:body>
</html>

